<template>
    <div class="enterprise-info">
  <!-- 毕业生端 -->
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-row :gutter="20" type="flex" justify="space-between" align="middle">
          <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18" style="display: flex; justify-content: flex-end;">
            <!-- 企业名称 -->
            <el-input v-model="searchKeyword.name" placeholder="企业名称(模糊查)" style="width: 150px; margin-right: 20px;" 
              @keyup.enter="handleSearch"
            ></el-input>
            <!-- 企业地址 -->
            <el-input v-model="searchKeyword.address" placeholder="企业地址(模糊查)" style="width: 150px; margin-right: 20px;" 
              @keyup.enter="handleSearch"
            ></el-input>
            <!-- 联系人电话 -->
            <el-input v-model="searchKeyword.contact" placeholder="联系人(模糊查)" style="width: 150px; margin-right: 20px;" 
              @keyup.enter="handleSearch"
            ></el-input>
            <el-input v-model="searchKeyword.contactPhone" placeholder="联系人电话" style="width: 150px; margin-right: 20px;" 
              @keyup.enter="handleSearch"
            ></el-input>
            <!-- 搜索按钮 -->
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <!-- 重置按钮 -->
            <el-button type="info" plain @click="resetSearch">重置</el-button>
          </el-col>
        </el-row>
      </div>
      
  
      <el-table :row-class-name="tableRowClassName" :data="dataList.slice((currentPage - 1) * PageSize, currentPage * PageSize)">
        <el-table-column type="index" label="序号" width="100px" align="center" />
        <el-table-column label="企业名称" align="center" prop="name" />
        <el-table-column label="地址" align="center" prop="address" />
        <el-table-column label="联系人" align="center" prop="contact" />
        <el-table-column label="联系电话" align="center" prop="contactPhone" />
        <el-table-column label="企业简介" align="center" prop="introduction" />
        <el-table-column label="企业邮箱" align="center" prop="email" />
        <el-table-column label="注册时间" align="center" prop="createTime" />
        <el-table-column align="center" label="操作" width="250">
          <template #default="scope">
            <!-- 查看职位按钮 -->
            <el-button size="mini" type="success" plain :class="{'no-recruit': !scope.row.recruitDomainList || scope.row.recruitDomainList.length === 0,}"
              @click="viewRecruitInfo(scope.row)">查看职位
            </el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <div class="tabListPage" style="float: right; margin-right: 5%; margin-top: 20px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
      </div>
  
      <!-- 查看职位信息的对话框 -->
      <RecruitInfoDialog :user-type="type" :visible.sync="recruitDialogVisible" :recruitInfoList="recruitInfoList"></RecruitInfoDialog>
    </div>
  </template>
  
  
  <script>
  import { getList,getListByParams } from '@/api/enterprise';
  import RecruitInfoDialog from '../module/RecruitInfoDialog.vue';
  
  export default {
    components: {
      RecruitInfoDialog
    },
    data() {
      return {
        searchKeyword: {
          name: "", // 企业名称
          address: "", // 企业地址
          contact: "", // 联系人
          contactPhone: "", //电话
        },
  
        dataList: [], // 表格数据
        currentPage: 1, // 当前页码
        totalCount: 0, // 总条数
        pageSizes: [5, 10, 20], // 每页显示条数选项
        PageSize: 10, // 默认每页显示条数
        recruitDialogVisible: false, // 职位信息对话框是否可见
        recruitInfoList: [], // 当前企业的职位信息列表
        type: 0, // 登录类型,0 学生(不展示新增职位按钮)，1 管理员 
      };
    },
  
    methods: {
      // 获取企业数据
      getData() {
        getList()
          .then((response) => {
            if (response.code === 200) {
              this.dataList = response.data; // 设置表格数据
              this.totalCount = response.data.length; // 设置总条数
            } else {
              this.$message({
                showClose: true,
                message: '数据加载失败，请稍后再试！',
                type: 'error',
              });
            }
          })
          .catch((error) => {
            console.error('数据加载失败:', error);
            this.$message({
              showClose: true,
              message: '网络错误，请检查您的网络连接！',
              type: 'error',
            });
          });
      },
      // 查看职位信息
      viewRecruitInfo(row) {
        const recruitInfo = row.recruitDomainList; // 获取当前企业的职位信息
        if (recruitInfo && recruitInfo.length > 0) {
          this.recruitInfoList = recruitInfo; // 设置职位信息
          this.recruitDialogVisible = true; // 打开对话框
        } else {
          this.$message({
            message: '当前企业无在招聘职位！',
            type: 'warning',
            duration: 3000, // 显示时长（毫秒）
          });
        }
      },
      
    // 封装通用的数据请求方法
    paramsList() {
      const data = { ...this.searchKeyword }; 
  
      getListByParams(data).then((response) => {
            if (response.code === 200) {
              this.dataList = response.data; // 设置表格数据
              this.totalCount = response.data.length; // 设置总条数
            } else {
              this.$message({
                showClose: true,
                message: '数据加载失败，请稍后再试！',
                type: 'error',
              });
            }
          })
          .catch((error) => {
            console.error('数据加载失败:', error);
            this.$message({
              showClose: true,
              message: '网络错误，请检查您的网络连接！',
              type: 'error',
            });
          });
    },
  
    // 处理搜索
    handleSearch() {
      this.currentPage = 1;
      this.paramsList();
    },
  
    // 重置方法
    resetSearch() {
      this.searchKeyword = {
        name: "",
        address: "",
        contact: "",
      };
      this.currentPage = 1; // 重置到第一页
      this.getData(); // 调用无条件查询方法
    },
      // 分页大小改变
      handleSizeChange(val) {
        this.PageSize = val;
        this.currentPage = 1;
      },
      // 当前页码改变
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      // 表格行样式
      tableRowClassName({ rowIndex }) {
        return rowIndex % 2 === 1 ? '' : 'success-row';
      },
    },
    created() {
      this.getData(); // 页面加载时获取数据
    },
  };
  </script>
  
  <style scoped>
  /* 搜索区域整体样式 */
  .search-area {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f9f9f9; /* 浅色背景 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  }
  
  /* 输入框样式 */
  .search-area .el-input {
    width: 500px;
    margin-right: 10px; /* 输入框与按钮之间的间距 */
  }
  
  .search-area .el-input__inner {
    height: 40px; /* 增加输入框高度 */
    font-size: 14px; /* 字体大小 */
    border-radius: 4px; /* 圆角 */
    border: 1px solid #dcdfe6; /* 边框颜色 */
    transition: border-color 0.3s ease; /* 边框过渡效果 */
  }
  
  .search-area .el-input__inner:focus {
    border-color: #409eff; /* 聚焦时边框变蓝 */
    box-shadow: 0 0 4px rgba(64, 158, 255, 0.2); /* 添加聚焦阴影 */
  }
  
  /* 按钮样式 */
  .search-area .el-button {
    height: 40px; /* 按钮高度与输入框一致 */
    margin-left: 10px; /* 按钮之间的间距 */
    padding: 0 20px; /* 增加按钮宽度 */
    font-size: 14px; /* 字体大小 */
    border-radius: 4px; /* 圆角 */
  }
  
  /* 新增按钮样式 */
  .search-area .el-button:last-child {
    background-color: #409EFF; /* 蓝色背景 */
    border-color: #409EFF; /* 蓝色边框 */
  }
  
  .search-area .el-button:last-child:hover {
    background-color: #66B1FF; /* 鼠标悬浮时背景加深 */
    border-color: #66B1FF; /* 边框颜色加深 */
  }
  
  /* 重置按钮的基础样式 */
  .search-area .el-button--info.is-plain {
    color: #909399; /* 文字颜色 */
    background-color: #f5f7fa; /* 背景颜色 */
    border-color: #dcdfe6; /* 边框颜色 */
  }
  
  /* 重置按钮悬停时的样式 */
  .search-area .el-button--info.is-plain:hover {
    color: #606266; /* 悬停时文字颜色加深 */
    background-color: #ebeef5; /* 悬停时背景颜色 */
    border-color: #dcdfe6; /* 边框颜色保持不变 */
  }
  
  /* 重置按钮点击时的样式 */
  .search-area .el-button--info.is-plain:active {
    color: #303133; /* 点击时文字颜色更深 */
    background-color: #e4e7ed; /* 点击时背景颜色 */
    border-color: #dcdfe6; /* 边框颜色保持不变 */
  }
  
  
  
  /* 查看职位按钮的默认样式 */
  .el-button {
    transition: all 0.3s ease; /* 添加过渡效果 */
  }
  
  /* 查看职位按钮的悬浮样式 */
  .el-button:hover {
    background-color: #67c23a; /* 鼠标悬浮时背景色变深 */
    color: #fff; /* 文字颜色变为白色 */
    border-color: #67c23a; /* 边框颜色与背景一致 */
    transform: scale(1.05); /* 放大按钮 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
  
  /* 没有职位信息的按钮样式 */
  .no-recruit {
    background-color: #f0f9eb; /* 浅绿色背景 */
    color: #a8b7c7; /* 浅灰色文字 */
    border-color: #e1f3d8; /* 浅绿色边框 */
  }
  
  /* 没有职位信息的按钮悬浮样式 */
  .no-recruit:hover {
    background-color: #e1f3d8; /* 浅绿色背景加深 */
    color: #85ce61; /* 文字颜色变为浅绿色 */
    border-color: #c2e7b0; /* 边框颜色加深 */
    transform: none; /* 不放大 */
    box-shadow: none; /* 不添加阴影 */
  }
  
  /* 修改按钮的悬停和点击样式 */
  .el-button--primary:hover,
  .el-button--primary:focus {
    background-color: #409eff; /* 蓝色 */
    border-color: #409eff;
  }
  
  .el-button--danger:hover,
  .el-button--danger:focus {
    background-color: #f56c6c; /* 红色 */
    border-color: #f56c6c;
  }
  
  </style>